<%@page import="org.proddevplm.dao.data.Roles"%>
<%@page import="org.proddevplm.dao.data.User"%>
<%@page import="org.proddevplm.dao.data.RelationMatrix"%>
<%@page import="org.proddevplm.dao.data.Project"%>
<%@page import="java.util.*"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.project.constants.ProjectConstants"%>

<script>
	$(function() {
		$( "#editStartDate" ).datepicker();
		$( "#editEndDate" ).datepicker();
		$("input:button, input:submit").button();
	});
	
	$('.highlight').mouseover(function () {
		$(this).css("color","black");
	    $(this).css("cursor", "help");
	 });

	$('.highlight').mouseout(function () {
		$(this).css("color","#555555");	    	    
	 });

	function checkForm()
	{
		if (document.editProject.editProjectName.value=='')
		{
			alert('Please insert the name of the project');
			return false;
		}
		else if (document.editProject.editDescription.value=='')
		{
			alert('Please add a description of your project');
			return false;
		}
		else if (document.editProject.editStartDate.value=='')
		{
			alert('Please select the start date of your project');
			return false;
		}
		else if (document.editProject.editEndDate.value=='')
		{
			alert('Please select the estimated end date of your project');
			return false;
		}
		else if (document.editProject.editStartDate.value>document.editProject.editEndDate.value)
		{
			alert('The end date you entered is earlier than the start date of your project');
			return false;
		}
		else if (document.editProject.editMembers.value==null)
		{
			alert('There are no members in your project');
			return false;
		}

		onBeforeSubmit();
		return true;
	}
	
	function inviteMember()
	{
		var name=prompt("Please enter the email for the new member");
		if (name!=null && name!="")
		  {
			document.editProject.editMembers.options[document.editProject.editMembers.options.length] = new Option (name);
		  }
	}

	function addRole()
	{
		var role = document.editProject.newRole.value;
		if (role!=null && role!="")
		{
			document.editProject.editRoles.options[document.editProject.editRoles.options.length] = new Option (role);
		}
	}

	function addMember()
	{
		for (var i=0; i<document.editProject.editUsers.length; i++)
		{
			if (document.editProject.editUsers.options[i].selected)
			{
				document.editProject.editMembers.options[document.editProject.editMembers.options.length] = new Option (document.editProject.editUsers.options[i].text, document.editProject.editUsers.options[i].value);
			}
		}
	}

	function removeMember()
	{
		for (var i=0; i<document.editProject.editMembers.length; i++)
		{
			if (document.editProject.editMembers.options[i].selected)
			{
				document.editProject.editMembers.options[i]=null;
			}
		}
	}

	function clearList()
	{
		var i=0;
		while (document.editProject.editMembers.length!=0)
			document.editProject.editMembers.options[i]=null;
			i++;
	}

	function removeRole()
	{
		for (var i=0; i<document.editProject.editRoles.length; i++)
			if (document.editProject.editRoles.options[i].selected)
				document.editProject.editRoles.options[i]=null;
		
	}

	function setRole()
	{
		for (var i=0; i<document.editProject.editRoles.length; i++)
			if (document.editProject.editRoles.options[i].selected)
			{
				for (var j=0; j<document.editProject.editMembers.length; j++)
				{	if (document.editProject.editMembers.options[j].selected)
						document.editProject.editMembers.options[j] = new Option (document.editProject.editMembers.options[j].text+', '+document.editProject.editRoles.options[i].text, document.editProject.editMembers.options[j].value+','+document.editProject.editRoles.options[i].value);
				}
			}
	}

	function onBeforeSubmit()
	{
		var members = '';
		var roles = '';
		var index = 0;
		$("#editMembers option").each(function() {
		    if (index++>0) {
			members+=',';
			roles+=',';
		    }

            members+=$(this)[0].value.split(',')[0];
		    roles+=$(this)[0].value.split(',')[1];


		})
		$('#editUserlist').val(members);					
		$('#editRoleslist').val(roles);
		
		document.forms["editProject"].submit();
	}
	
	function updateProject(){
		checkForm();
	}
	
</script>

<div class="containerBig" style="font-family: verdana; font-size:small; width:auto; ">
	<form name="editProject" method="post" onSubmit="return checkForm()" action="/proddev/controller">
		<input type="hidden" name ="<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.PROJECT_MANAGER %>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ProjectConstants.EDIT_PROJECT%>"/>
		<input type = "hidden" id="editUserlist" name = "editUserlist">
  		<input type = "hidden" id="editRoleslist" name = "editRoleslist">
		
		<div >
			<div class="pageTitle" style="text-align:center; font-size:medium; height:20px; padding:1%;">
				<b style="float:center">Edit Project</b>
				<img src="/proddev/images/update.png" onclick="updateProject()" width="30" height="30" style="float:right; margin-right:1%; margin-top:-5px">
				<div style="clear:both"></div>
			</div>
		</div>
			
		<%
		Project currentProject = (Project)session.getAttribute("currentProject");
		List relMatrix = (List)session.getAttribute("relationMatrix");
		List allUsers = (List)session.getAttribute("allUsers");
		List allRoles = (List)session.getAttribute("allRoles");
		%>
				
		<div style="margin-left:1%; margin-top:20px; margin-bottom:10px">
			<div class="containerSmall" id="leftSideEP" style="width:30%; float:left; ">
				<div >
					<div id="projectName" class="highlight" style="width: 200px; ">
						<b>Project name: </b>
					</div>
					<input class="regInput" value="<%=currentProject.getName()%>" type="text" name="editProjectName" style="width: 100%; margin-top:5px">
				</div>
		
				<div style="margin-top: 10px;">
					<div id="description" class="highlight" style="width: 200px; ">
						<b>Description: </b>
					</div>
					<textarea class="regInput" name="editDescription" rows="5" style="width:100%; margin-top:5px"><%=currentProject.getDescription()%></textarea>
				</div>
		
				<div style="margin-top: 10px;">
					<div id="startDate" class="highlight" style="width:200px; float: left; ">
						<b>Select Start date: </b>
					</div>
					<input class="regInput" value="<%=currentProject.getStartDate() %>" id="editStartDate" name="editStartDate" type="text" style="width:30%; text-align:center; float:right" >
					<div style="clear:both"></div>
				</div> 
	
				<div style="margin-top: 10px;">
					<div id="endDate" class="highlight" style="width:200px; float:left; ">
						<b>Select End date: </b>
					</div>
					<input class="regInput" value="<%=currentProject.getEndDate() %>" id="editEndDate" name="editEndDate" type="text" style="width:30%; text-align:center; float:right;" >
				</div>
				
				<div style="clear:both;"></div>
			</div>
		
			<div class="containerSmall" style="width:30%; margin-left:3%; margin-right:3%; float:left; ">
				<div id="projectMembers" class="highlight" style="width: 200px; ">
					<b>Add project members: </b>
				</div>
				<select class="regInput" name="editUsers" style="width:100%; margin-top:5px;" size="12">
					<%
					 for (int i=0; i<allUsers.size(); i++){
						 User u = (User)allUsers.get(i);%>
						 <option value="<%=u.getId()%>" style="font-weight:bold; color:#555555"><%=u.getSurname()+" "+u.getName()%></option>
					<%}%>
				</select>
				<div style="width:100%">
					<input id="addM" style="width:40%; margin-top:10px; font-weight: bold; float:left" type="button" name="add" value="Add member" onclick="addMember()">
					<input id="inviteM" style="width:40%; margin-top:10px; font-weight: bold; float:right" type="button" name="invite" value="Invite member" onclick="inviteMember()">
				</div>
				<div style="clear:both"></div>
			</div>
				
			<div class="containerSmall" style="width:30%; float:left; ">
				<div id="projectRoles" class="highlight" style="width:200px; ">
					<b>Project roles: </b>
				</div>
				<select class="regInput" name="editRoles" style="width:100%; margin-top:5px" size="6">
				  	<% 	
					for (int i=0; i<allRoles.size(); i++){
						Roles r = (Roles)allRoles.get(i);%>
						<option value="<%=r.getId()%>" style="font-weight:bold; color:#555555"><%=r.getRole()%></option>
					<%}%>
				</select>
				
				<div style="margin-top:10px;">
					<input id="sRole" style="width:40%; font-weight: bold; float:left;" type="button" name="setR" value="Set role" onclick="setRole()">
					<input id="clrRole" style="width:40%; font-weight: bold; float:right" type="button" name="removeR" value="Remove role" onclick="removeRole()">
					<div style="clear:both"></div>
				</div>
				
				<div class="highlight" style="margin-top:10px; width:200px; ">
					<b>Define new role: </b>
				</div>
				<input class="regInput" style="width:100%; margin-top:5px" type="text" name="newRole">
				<input id="defineRole" style="width:40%; margin-top:5px; font-size:small; font-weight: bold;" type="button" value="Add role" onclick="addRole()">
				<div style="clear:both;"></div>	
			</div>
			<div style="clear:both;"></div>	
			
			<div align="center">
				<div class="containerSmall" style="margin-top:30px; width:50%; float:center; ">
					<div class="highlight" id="currentMembers" style="width:250px; ">
						<b>Current members and roles:</b>
					</div>
					<select class="regInput" id="editMembers" name="editMembers" style="margin-top:5px; width:100%; font-weight:bold; color:#555555" size="7">
						<%for(int i=0; i<relMatrix.size(); i++){
							RelationMatrix rm = (RelationMatrix)relMatrix.get(i);
							User u = (User)rm.getUser();
							Roles r = (Roles)rm.getRole();%>
							<option value="<%=u.getId()+","+r.getId()%>" style="font-weight:bold; color:#555555"><%=u.getSurname()%> <%=u.getName()%>, <%=r.getRole() %></option>
						<%} %>
					</select>
					
					<div style="margin-top:10px;">
						<input id="remMember" style="width:40%; font-size:small; font-weight: bold; float:left;" type="button" name="removeM" value="Remove member" onclick="removeMember()">
						<input id="clrList" style="width:40%; font-size:small; font-weight: bold;" type="button" name="clear" value="Clear list" onclick="clearList()">
						<div style="clear:both;"></div>
					</div>
					<div style="clear:both"></div>			
				</div>		
			</div>
			
			<div style="clear:both"></div>
		</div>	
	</form>		
</div>